<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table {
      text-align: center;
    }

    thead {
      background-color: #00c8ff;
      color: white;
    }

    tbody {
      background-color: #96ff85;
      color: #00c8ff;
    }
  </style>
  <script>
    var showClick;
    window.onload = function () {
      showClick = document.getElementById('3');
      var t1Array = document.querySelectorAll('tbody>tr');
      for (var i = 0; i < t1Array.length; i++) {
        t1Array[i].onclick = function () {
          click(this);
        }
      }
    }

    function click(t2Div) {
      showClick.style.backgroundColor = '#96ff85';
      showClick.style.color = '#00c8ff';
      t2Div.style.backgroundColor = 'white';
      t2Div.style.color = 'black';
      showClick = t2Div;
    }
  </script>
</head>
<body>
<table border="1">
  <thead>
  <tr>
    <td>id</td>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    <td>职位</td>
    <td>学历</td>
  </tr>
  </thead>
  <tbody>
  <tr id="1">
    <td>1</td>
    <td>赵云</td>
    <td>男</td>
    <td>21</td>
    <td>部门经理</td>
    <td>本科</td>
  </tr>
  <tr id="2">
    <td>2</td>
    <td>吕布</td>
    <td>男</td>
    <td>21</td>
    <td>普通员工</td>
    <td>高中</td>
  </tr>
  <tr id="3" style="background-color: white;color: black">
    <td>3</td>
    <td>郭嘉</td>
    <td>男</td>
    <td>18</td>
    <td>部门经理</td>
    <td>硕士</td>
  </tr>
  </tbody>
</table>
</body>
</html>